<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
	<title>Special Characters</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">
.textTable {
	text-align: left;
	border: 1px dotted red;
	padding : 1px;
	font-size : 18px;
}
</style>

</head>
<body bgcolor="white">
<script type="text/javascript">
<!--
  function goto_URL(object) {
  if(object.options[object.selectedIndex].value)
    parent.main.location.href = object.options[object.selectedIndex].value;
  }
	
	function insertAndClose() {
	var spChar = parent.main.spChar.join('');
	if(spChar)
		parent.window.opener.insertHTML(spChar);
	parent.window.close();
	}
	
	function clearInsert()
	{
		parent.main.spChar = new Array();
		parent.main.text = new Array();
		document.getElementById("textBox").innerHTML = '';
	}
	function stepBack()
	{
		parent.main.spChar.pop();
		parent.main.text.pop();
		document.getElementById("textBox").innerHTML = parent.main.text.join('');
	}
  
//-->
</script>
<form onsubmit="return false;">
  <p>
    <select name="selectName" onchange="goto_URL(this.form.selectName)">
    <option value="">Select a character set:</option>
    <option value="sp_char.php#basicLatin">Basic Latin</option>
    <option value="sp_char.php#latin1">Latin 1</option>
    <option value="sp_char.php#latinExtendedA">Latin Extended A</option>
    <option value="sp_char.php#latinExtendedB">Latin Extended B</option>
    <option value="sp_char.php#IPA">IPA Extensions</option>
    <option value="sp_char.php#spacingModifierLetters">Spacing Modifier Letters</option>
    <option value="sp_char.php#combiningDiacriticalMarks">Combining Diacritical Marks</option>
    <option value="sp_char.php#basicGreek">Basic Greek</option>
    <option value="sp_char.php#cyrillic">Cyrillic</option>
    <option value="sp_char.php#basicHebrew">Basic Hebrew</option>
    <option value="sp_char.php#arabic">Arabic</option>
    <option value="sp_char.php#latinExtendedAdditional">Latin Extended Additional</option>
    <option value="sp_char.php#generalPunctuation">General Punctuation</option>
    <option value="sp_char.php#currencyLetter">Currency and Letterlike Symbols</option>
    <option value="sp_char.php#numberArrow">Number Forms and Arrows</option>
    <option value="sp_char.php#mathematicalOperator">Mathematical Operators</option>
    <option value="sp_char.php#alphabeticPresentation">Alphabetic Presentation Forms</option>
    <option value="sp_char.php#arabicPresentationA">Arabic Presentation Forms A</option>
    <option value="sp_char.php#arabicPresentationB">Arabic Presentation Forms B</option>
    </select>
  </p>
<p>
  <table class="textTable" width="60%" cellspacing="0" cellpadding="5">
    <tr>
      <td id="textBox">&nbsp;</td>
    </tr>

  </table>
<!--<textarea cols="20" rows="3" onFocus="blur()" name="textBox" id="textBox" vwrap /></textarea>-->
</p>
<p>
<input type="button" value="Insert" onFocus="blur()" name="insert" title="Insert" onClick="insertAndClose()" />
&nbsp;&nbsp;&nbsp;
<input type="button" value="Step back" onFocus="blur()" name="back" title="Back" onClick="stepBack()" />
&nbsp;&nbsp;&nbsp;
<input type="button" value="Clear" onFocus="blur()" name="clear" title="Clear" onClick="clearInsert()" />
</p>

</form>
</body>
</html>
